import {defineComponent, inject, nextTick, onBeforeUnmount, onMounted} from "vue";
import Style from "@/styles/components/drawer.module.css";

export default defineComponent({
    name: "CdlDrawer",
    props: {
        title: String,
        vNode: Object,
        callFun: Function
    },

    setup(props){

        const close: Function | undefined = inject("destroyDrawer")
        /**
         * 弹出层销毁事件
         */
        function popupClose(){
            const drawer: HTMLDivElement = document.querySelector("#cdl_drawer")!
            drawer.classList.remove(Style.on)
            setTimeout(()=>{
                close?.()
            },300)
        }

        /**
         * 关闭按钮
         */
        function maskClose(){
            popupClose()
        }
        nextTick(() => {
            const drawer: HTMLDivElement = document.querySelector("#cdl_drawer")!
            drawer.classList.add(Style.on)
        }).then(r  =>{})


        return ()=> (
            <>
                <div class={Style.mask} onClick={maskClose}></div>
                <div class={Style.suspended_window}>
                    <header class={Style.header}>
                        <h2>{props.title}</h2>
                        <button class={Style.drawer_close} onClick={popupClose}>
                            <i class={Style._i}><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg></i>
                        </button>
                    </header>
                    <div class={Style.content}>
                        <drawer v-slots={{default: () => props.vNode}}></drawer>
                    </div>
                    <footer class={Style.footer}>
                    </footer>
                </div>
            </>
        )
    }
})

const drawer = defineComponent((_, {slots}) =>{
    return () => (
        <>
            {slots.default? slots.default() : "是不是没传递插槽内容？参数{vNode}可能不是一个虚拟DOM或组件" }
        </>
    )
})
